<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>青橙社区-学习资料详情</title>
	<meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width, initial-scale=0.57, minimum-scale=0.57, maximum-scale=0.57, user-scalable=no">
	<link rel="Shortcut Icon" href="images/favicon_logo.ico">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/layui.css">
	<link rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
	<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
</head>
<body>
	<!--[if lt IE 8]>
	<div style="position:fixed;left:0;top:0;width:100%;height:50px;background:#fff;color:red;border-bottom:1px solid rgb(230,230,198);text-align:center;line-height:50px;font-size:12px;z-index: 9999;">您使用的浏览器版本过低，可能会影响到您浏览本网页，建议您升级您的浏览器。</div>
	<![endif]-->
	<!--[if IE 6]>
	<script src="js/DD_belatedPNG_0.0.8a.js" mce_src="js/DD_belatedPNG_0.0.8a.js"></script>
	<script type="text/javascript">DD_belatedPNG.fix('*');</script>
	<![endif]-->
	<div class="index learning-details-index">
		<div class="header clearfix">
			<div class="header-box">
				<div class="left-logo">	
					<a href="javascript:;">
						<img src="images/qc_logo.png">
					</a>
				</div>
				<div class="title-link">
					<a href="javascript:;">首页</a>
					<a href="javascript:;">问答区</a>
					<label for="">
						<input type="text" name="" value="" placeholder="请输入搜索关键词">
						<i></i>
					</label>
				</div>
				<div class="right-link">
					<a onclick="register()" href="javascript:;">注册</a>
					<span></span>
					<a onclick="login()" href="javascript:;">登录</a>
				</div>
			</div>
		</div>
		<div class="learning-details-wrap">
			<div class="learning-details-title">
				<div class="learning-details-box">
					<h1>PHP</h1>
					<ul>
						<li>初级~高级</li>
						<li>1-3个月</li>
						<li>10人学习</li>
						<li>5人毕业</li>
					</ul>
					<a class="style-btn join-learning-btn" href="javascript:;">加入学习</a>
				</div>
			</div>
		</div>
		<div class="learning-details-main">
			<div class="details-top">
				<dl class="l-dl">
					<dt>
						<img src="images/pic_img.png" title="头像">
					</dt>
					<dd>
						<span>我是女生</span>
						<strong>5</strong>
						<b>发布资源数：<i>12</i></b>
					</dd>
				</dl>
			</div>
			<div class="details-box">
				<div class="det-title">
					<h1>交互设计十个原则</h1>
					<h3>
						<span>2018.05.16  16：20</span>
						<strong class="s-ll">1200浏览</strong>
						<strong class="s-pn">621评论</strong>
					</h3>
				</div>
				<div class="main">
					<img src="images/banner_img_01.jpg">
					<p>日常的交互设计工作中，设计师在明确了需求目标、用户场景，搭建了信息结构之后，下一步便是构思如何让这些信息与用户之间产生有效的互动，而这就需要设计师将思路放在时间的维度上一步步的推进，这中间，便会产生许多关于“时机”问题的讨论。虽然，“时机”一词有其本身特定的含义，但“时”与“机”这两个字却有又可以拆分理解，牵出二者之间的微妙差异：</p>
					<p>—  时者，四季也，代表着规律、循环的时间段，并且具有较强的普适性；</p>
					<p>—  机，机会，指在特定的条件下的有利条件，不具备普适性，却往往能产生好的结果；</p>
					<p>例举一个时下的例子：毕业生求职，都有所谓“金九银十”的说法，每年九月、十月是求职的高峰期，于是各种针对求职的产品、广告也均迎来爆发期，这是一段循环的具备普适性的时间段；而作为一个毕业生，也许通过导师或朋友的介绍，恰好得知了某个公司的职位空缺，于是积极准备直至录取，这便是抓住了一个机会。<br/>而将情景移到交互设计中来，站在设计师的角度，这两个字又可以有其特有的诠释：</p>
					<p>图1：“时”“机”关系简图</p>
					<p>时 — 即产品功能的主要流程交互，由持续的时间片段组成，也许是几分钟（如：阅读），也许是数秒（如：登录、注册）甚至更短，而形式上可以是可见的（如：下载进度），也可以是不可见不可感知的（如：信息的同步）。</p>
					<p>它所针对的是整个目标人群，无论是专家用户还是小白用户；</p>
					<p>它的目的很明确，就是引导用户一步一步的达成需求目标；</p>
					<p>而相对于信息结构中“上下左右的空间关系”的设计，在时间维度上，我们更应专注于功能模块在时间上的先后串联，引导用户的操作行为，即“顺序的设计”，即便是完全相同的操作，顺序上的不同，也会造成体验上的差异，试想，如果你是一个新用户，打开两个同类型的应用，一个告诉你“你需要注册后才能体验”，而另一个则说“你可以先体验，如果觉得需要再注册”，感觉上的差异就产生了。</p>
				</div>
				<div class="publish-comment">
					<h4 class="det-h4">
						<img src="images/icon_s_09.png">
						<span>评论</span>
					</h4>
					<textarea name="" id="" cols="30" rows="10"></textarea>
					<a class="publish-btn" href="javascript:;">发表</a>
				</div>
				<div class="news-comment">
					<h5>
						<span class="select">最新评论</span>
						<b>|</b>
						<span>正序排列</span>
					</h5>
					<ul>
						<li>
							<dl>
								<dt>
									<img src="images/pic_img.png">
								</dt>
								<dd>
									<h6><strong>我是女神</strong><b>12分钟前</b></h6>
									<div>
										<p>这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论。</p>
									</div>
									<a class="reply-btn" href="javascript:;" title="回复">回复</a>
								</dd>
							</dl>
							<label class="reply-label" for="">
								<input type="text" name="" value="">
								<a href="javascript:;" title="提交">提交</a>
							</label>
						</li>
						<li>
							<dl>
								<dt>
									<img src="images/pic_img.png">
								</dt>
								<dd>
									<h6><strong>我是女神</strong><b>12分钟前</b></h6>
									<div>
										<p>这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论。</p>
									</div>
									<a class="reply-btn" href="javascript:;" title="回复">回复</a>
								</dd>
							</dl>
							<label class="reply-label" for="">
								<input type="text" name="" value="">
								<a href="javascript:;" title="提交">提交</a>
							</label>
						</li>
						<li>
							<dl>
								<dt>
									<img src="images/pic_img.png">
								</dt>
								<dd>
									<h6><strong>我是女神</strong><b>12分钟前</b></h6>
									<div>
										<p>这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论。</p>
									</div>
									<a class="reply-btn" href="javascript:;" title="回复">回复</a>
								</dd>
							</dl>
							<label class="reply-label" for="">
								<input type="text" name="" value="">
								<a href="javascript:;" title="提交">提交</a>
							</label>
						</li>
						<li>
							<dl>
								<dt>
									<img src="images/pic_img.png">
								</dt>
								<dd>
									<h6><strong>我是女神</strong><b>12分钟前</b></h6>
									<div>
										<p>这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论这是评论。</p>
									</div>
									<a class="reply-btn" href="javascript:;" title="回复">回复</a>
								</dd>
							</dl>
							<label class="reply-label" for="">
								<input type="text" name="" value="">
								<a href="javascript:;" title="提交">提交</a>
							</label>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<!-- 加入学习 -->
	<div class="join-learning-wrap">
		<div class="learning-box">
			<a class="close-btn" href="javascript:;" title="关闭"></a>
			<h4>课程名称</h4>
			<h3>课程标题课程标题课程标题课程标题课程</h3>
			<h4>学习周期</h4>
			<select>
				<option value="1-3个月">1-3个月</option>
				<option value="3-6个月">3-6个月</option>
				<option value="6-9个月">6-9个月</option>
			</select>
			<h4>加入方式</h4>
			<form>
				<input type="radio" name="integral" checked="checked">100积分
				<p>（当前积分：50）<a href="javascript:;" title="获取积分">获取积分</a></p>
				<input type="radio" name="integral" >10元<br>
			</form>
			<a class="confirm-btn" href="javascript:;">确定加入</a>
		</div>
	</div>

	<script type="text/javascript" src="js/layer.js"></script>
	<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
	<script type="text/javascript" src="js/public.js"></script>
</body>
</html>